﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*<link href="~/Content/bootstrap.css" rel="stylesheet" />*@
    <link href="~/Content/Table/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <style>
        #content .page-header {
            min-height: 45px !important;
        }

        .fixed-table-container tbody tr.selected {
            background-color: #B0BED9 !important;
        }

            .fixed-table-container tbody tr.selected td {
                background-color: #B0BED9 !important;
            }

        .bs-checkbox {
            display: none;
        }

        .bootstrap-select, .date {
            cursor: pointer !important;
        }

        .modal-backdrop {
            margin-top: 0px;
        }

        tbody > tr {
            cursor: pointer;
        }
        /*input {
            background-color: #fcfcfc !important;
        }*/


        /*#tableID {
            table-layout: fixed;
        }*/

        /* #tableID tbody tr td {
                text-overflow: ellipsis;
                -moz-text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                border: 1px solid #ddd;
                text-align: left;
            }*/

        textarea {
            resize: none !important;
        }

        .setFontLenghtByPoint {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 center">
                <div class="hide">
                    <button class=" btn btn-success" id="btnAdd" value="">添加流程</button>
                    <button class=" btn btn-primary" id="btnEdit" value="">修改流程</button>
                    <button class=" btn btn-danger" id="btnDelete" value="">删除流程</button>
                </div>
                <label class="red" style="color:red">如需添加新流程，请前往OA系统</label>
                <button class=" btn btn-default right" id="btnDesign" value="">设计流程</button>
                <button class=" btn btn-warning right" id="btnImport" value="">导入OA</button>


                <table id="tabFlowID" class="table table-hover"></table>
            </div>
        </div>
    </div>

    <!--Start详情内容-->
    <div class="modal fade" id="FlowModelID" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header green">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        流程详情编辑
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="box-body">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-lg-4">流程编号：</label>
                                    <div class="col-lg-8">
                                        <input id="txtFlowID" name="txtFlowID" class="form-control" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-4">流程名称：</label>
                                    <div class="col-lg-8">
                                        <input id="txtFlowName" name="txtFlowName" class="form-control" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-4">流程介绍：</label>
                                    <div class="col-lg-8">
                                        <input id="txtRemark" name="txtRemark" class="form-control" />
                                    </div>
                                </div>
                                <input type="hidden" id="hidID" value="0" />
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer center">
                        <button id="btnSave" type="submit" class="btn btn-success">
                            <i class="fa fa-floppy-o"></i> 保存
                        </button>
                        <button id="btnClose" class="btn btn-primary">
                            <i class="fa fa-times"></i> 关闭
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>



    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/bootstrap-table/bootstrap-table.js"></script>
    <script src="~/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        $(function () {
            var tab = new FunFlowData();
            tab.Init();
            //添加按钮事件，弹出模态框
            $("#btnAdd").click(function () {
                Clear();
                $("#FlowModelID").modal("show");
            })
            //保存事件，保存流程信息
            $("#btnSave").click(function () {
                var FlowID = $("#txtFlowID").val();
                var FlowName = $("#txtFlowName").val();
                var Remark = $("#txtRemark").val();
                var ID = $("#hidID").val();

                var FlowEntity = {
                    id: ID,
                    flow_name: FlowName,
                    form_id: FlowID,
                    remark: Remark
                };
                var url = "/Flow/AjaxSave";

                $.post(url, { "Flow": FlowEntity }, function (data) {
                    if (data.statu == 1) {
                        //成功
                        $("#FlowModelID").modal("hide");
                        $('#tabFlowID').bootstrapTable('refresh');
                        Clear();
                    }
                    else {
                        alert("添加失败");
                    }
                }, 'json');


            })
            //关闭事件，关闭模态框
            $("#btnClose").click(function () {
                $("#FlowModelID").modal("hide");
                Clear();
            })
            $("#btnDesign").click(function () {
                var Flow = $("#tabFlowID").bootstrapTable("getSelections");
                if (Flow.length <= 0) {
                    alert("请选择一个流程");
                    return;
                }
                window.location.href = "/Home/Index?FlowID=" + Flow[0].FlowID + "&FlowName=" + Flow[0].FlowName;
            })
            $("#btnImport").click(function () {
                var Flow = $("#tabFlowID").bootstrapTable("getSelections");
                if (Flow.length <= 0) {
                    alert("请选择需要导入的流程");
                    return;
                }
                if (confirm("将删除OA已有流程配置数据，确认导入？")) {
                    var url = "/Flow/AjaxImprot";
                    $.post(url, { "FlowID": Flow[0].FlowID }, function (data) {
                        if (data.statu == 1) {
                            //成功
                            alert("导入成功");
                        }
                        else {
                            alert("导入失败");
                        }
                    }, 'json');
                }
            })
        })
        function Clear() {
            $("#txtFlowID").val("");
            $("#txtFlowName").val("");
            $("#txtRemark").val("");
            $("#hidID").val("");
        }
        var FunFlowData = function () {
            var oTableInit = new Object();
            oTableInit.Init = function () {
                $('#tabFlowID').bootstrapTable({
                    method: 'post',
                    toolbar: '',
                    striped: true,
                    cache: false,
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    pagination: true,
                    //sortable: false,      //是否启用排序
                    sortOrder: "asc",     //排序方式
                    pageNumber: 1,
                    pageSize: 10,
                    pageList: [10],
                    url: "/Flow/AjaxFlowData",
                    queryParamsType: 'limit',
                    queryParams: oTableInit.queryParams,
                    sidePagination: "server",
                    //search: true,
                    useCurrentPage: true,
                    strictSearch: true,
                    singleSelect: true,
                    //showColumns: true,     //是否显示所有的列
                    //showRefresh: true,     //是否显示刷新按钮
                    //minimumCountColumns: 2,    //最少允许的列数
                    clickToSelect: true,    //是否启用点击选中行{checkbox:true},
                    searchOnEnterKey: true,
                    // dataSelectItemName: "myRadioName",
                    columns: [
                        {
                            align: 'center',
                            checkbox: true,
                            //visible: false
                            //checkbox: true
                        },
                        {
                            field: 'ID',
                            title: '序号',
                            align: 'center'
                        },
                        {
                            field: 'FlowID',
                            title: '流程编号',
                            align: 'center',
                        },
                        {
                            field: 'FlowName',
                            title: '流程名称',
                            align: 'center',
                        },
                        {
                            field: 'Remark',
                            title: '流程介绍',
                            align: 'left',
                        }
                    ]
                });
            };
            oTableInit.queryParams = function (params) {
                params['offset'] = params.offset;
                params['limit'] = params.limit;
                return params;
            };
            return oTableInit;
        };
    </script>
</body>
</html>
